<template>
  <n-modal v-model:show="visible" preset="dialog" title="购买游戏" style="width: 400px">
    <div class="buy-dialog">
      <h3>购买功能开发中</h3>
      <p v-if="game">后续将支持购买：<b>{{ game.gameName }}</b></p>
      <n-button type="primary" block @click="$emit('close')">关闭</n-button>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { NModal, NButton } from 'naive-ui'
const props = defineProps<{ game: any }>()
const visible = ref(true)
watch(() => props.game, () => { visible.value = true })
</script>

<style scoped>
.buy-dialog {
  text-align: center;
  padding: 24px 0;
}
.buy-dialog h3 {
  margin-bottom: 16px;
  color: #0078d7;
}
.buy-dialog p {
  margin-bottom: 24px;
  color: #333;
}
</style> 